<template>
  <view>
    <!-- 顶部导航栏 -->
    <nav-title></nav-title>
    <!-- 聊天整体框架 -->
    <view class="message-view">
      <!-- 消息展示区域 -->
      <view class="message-box" id="messageBox">
        <view v-for="(item, index) in messageList" :key="index">
          <!-- 接收到的消息展示样式 -->
          <view v-show="item.type === 'from'" class="message-list">
            <!-- 头像显示 -->
            <img :src="item.userimage" alt="" srcset="" class="msg-img" />
            <!-- 消息展示 -->
            <view class="msg-view">
              <view class="msg-text">
                {{ item.message }}
              </view>
              <!-- 箭头展示 -->
              <view class="msg-arrow"></view>
            </view>
          </view>
          <!-- 发送的消息展示样式 -->
          <view v-show="item.type === 'send'" class="message-list msg-flex-end">
            <!-- 消息展示 -->
            <view class="msg-view-right">
              <view class="msg-text-right">
                {{ item.message }}
              </view>
              <!-- 箭头展示 -->
              <view class="msg-arrow-right"></view>
            </view>
            <!-- 头像显示 -->
            <img :src="item.userimage" alt="" srcset="" class="msg-img" />
          </view>
        </view>
      </view>
      <!-- 底部输入和发送 -->
      <view class="bottom-view">
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入留言"
        />
        <van-button
          round
          type="info"
          size="small"
          class="message-sendbtn"
          @click="sendMessage"
          :disabled="!message"
          >发送
        </van-button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 我的头像
      myUserImage:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F09%2F20180409125847_qyjvc.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
      // 当前输入框输入的消息
      message: "",
      // 已接收和已发送的消息数组
      messageList: [],
      // 当前正在聊天的userid
      nowChatUserId: "",
    };
  },
  onLoad(option) {
    // 从路径获取当前聊天人的userid
    this.nowChatUserId = option.userId;
  },
  mounted() {
    // 进入页面就让消息区域滚动到页面底部
    this.scrollBottom();
    let that = this;
    let im = this.$goeasy.im;
    // 监听接收消息
    let onPrivateMessageReceived = function(res) {
      console.log("监听到消息过来",res);      
      // push当前发送的内容
      that.messageList.push({
        message: res.payload.text,
        userimage: that.myUserImage,
        time: res.timestamp,
        type: "from",
        status: res.status,
      });
      // 让聊天内容滚动到最底部
      that.scrollBottom();
    };
    //监听和接收单聊消息
    im.on(
      that.$GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED,
      onPrivateMessageReceived
    );
  },
  methods: {
    // 发送消息方法
    sendMessage() {
      // 获取goeasy.im实例
      var im = this.$goeasy.im;
      const that = this;
      let textMessage = im.createTextMessage({
        text: that.message, //消息内容
        to: {
          type: that.$GoEasy.IM_SCENE.PRIVATE,
          id: that.nowChatUserId,
          data: {
            avatar: that.myUserImage,
            nickname: "Neo",
          },
        },
      });
      //发送消息
      im.sendMessage({
        message: textMessage,
        onSuccess: function(res) {
          //发送成功
          console.log("发送成功", res);
          // push当前发送的内容
          that.messageList.push({
            message: res.payload.text,
            userimage: that.myUserImage,
            time: res.timestamp,
            type: "send",
            status: res.status,
          });
          // 消息发送成功后清空输入框的值
          that.message = "";
          // 让聊天内容滚动到最底部
          that.scrollBottom();
        },
        onFailed: function(error) {
          //发送失败
          console.log("发送失败" + error.code + " ,error " + error.content);
        },
      });
    },
    // 让聊天内容滚动到最底部
    scrollBottom() {
      // 在DOM更新后再让页面滚动到底部
      this.$nextTick(() => {
        let div = document.getElementById("messageBox");
        div.scrollTop = div.scrollHeight;
      });
    },
    //
  },
};
</script>

<style scoped>
.message-view {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  background-color: #ececec;
  overflow: auto;
}
.bottom-view {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.message-sendbtn {
  width: 73px;
  height: 35px;
  font-size: 15px;
}
.message-box {
  margin-top: 50px;
  position: fixed;
  width: 100%;
  height: 83%;
  overflow: auto;
}
.message-list {
  display: flex;
  padding: 8px;
}
.msg-flex-end {
  justify-content: flex-end;
}
.msg-img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.msg-view {
  position: relative;
}
.msg-view-right {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.msg-text {
  background-color: white;
  padding: 8px;
  margin-left: 15px;
  border-radius: 6px;
  font-size: 16px;
  display: flex;
  height: auto;
  align-items: center;
  width: 85%;
  color: black;
}
.msg-text-right {
  background-color: #04be02;
  padding: 8px;
  margin-right: 15px;
  border-radius: 6px;
  font-size: 16px;
  display: flex;
  height: auto;
  align-items: center;
  color: black;
  width: 85%;
}
.msg-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 17px;
  left: 12px;
}
.msg-arrow-right {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #04be02;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 17px;
  right: 12px;
}
</style>
